<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="../../plugins/echarts.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>
  <script src="../../js/request.js"></script>
  <script src="../../api/order.js"></script>

</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="app">
  <div id="main" style="width: 400px;height:300px;"></div>
  <div id="main2" style="width: 400px;height:300px; "></div>
  <div id="main3" style="width: 400px;height:300px; "></div>
  <div id="main4" style="width: 400px;height:300px; "></div>
  <div id="main5" style="width: 400px;height:300px; "></div>
</div>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例

  // var myChart2 = echarts.init(document.getElementById('main2'));
  // var myChart3 = echarts.init(document.getElementById('main3'));
  // var myChart4 = echarts.init(document.getElementById('main4'));
  // var myChart5 = echarts.init(document.getElementById('main5'));

  // 指定图表的配置项和数据



  /*    option2 = {
          title: {
              text: '套餐营收分析',
              subtext: '套餐',
              left: 'center'
          },
          tooltip: {
              trigger: 'item'
          },
          legend: {
              orient: 'vertical',
              left: 'left'
          },
          series: [
              {
                  name: 'Access From',
                  type: 'pie',
                  radius: '40%',
                  data: [
                      {"value": 1048, "name": "儿童套餐A计划"},
                      {"value": 735, "name": "黑马毕业豪华套餐"},
                      {"value": 580, "name": "一荤两素经济套餐"}
                  ],
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      option3 = {
          tooltip: {
              trigger: 'item'
          },
          legend: {
              top: '5%',
              left: 'center'
          },
          series: [
              {
                  name: 'Access From',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                  },
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: 40,
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: 1048, name: 'Search Engine'},
                      {value: 735, name: 'Direct'},
                      {value: 580, name: 'Email'},
                      {value: 484, name: 'Union Ads'},
                      {value: 300, name: 'Video Ads'}
                  ]
              }
          ]
      };
      option4 = {
          tooltip: {
              trigger: 'item'
          },
          legend: {
              top: '5%',
              left: 'center'
          },
          series: [
              {
                  name: 'Access From',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: 40,
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: 1048, name: 'Search Engine'},
                      {value: 735, name: 'Direct'},
                      {value: 580, name: 'Email'},
                      {value: 484, name: 'Union Ads'},
                      {value: 300, name: 'Video Ads'}
                  ]
              }
          ]
      };
      option5 = {
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  data: [150, 230, 224, 218, 135, 147, 260],
                  type: 'line'
              }
          ]
      };*/

  new Vue({
    el: '#app',
    data() {
      return {}
    },
    mounted() {
      this.dishCategoryCash();
    },
    methods: {
      dishCategoryCash(){
        var myChart = echarts.init(document.getElementById('main'));

        axios.get("/statics/dishCash").then((res) => {
          console.log(res.data);
          option = {
            title: {
              text: '菜系营收分析',
              subtext: '菜系',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '40%',
                data: res.data.data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };

          myChart.setOption(option);
        })
      },

    }

  })


  // 使用刚指定的配置项和数据显示图表。
  // myChart2.setOption(option2);
  // myChart3.setOption(option3);
  // myChart4.setOption(option4);
  // myChart5.setOption(option5);
</script>
</body>
</html>